<template>
  <el-dialog
    :width="dialogWidth"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :show-close="false"
    :title="promptTitle"
    :append-to-body="appendToBody"
    custom-class="dialog-customWidth"
  >
    <div v-if="delBtn" class="close-icon" @click="dialog = false">
      <i class="el-icon-error" style="font-size:16px" />
    </div>
    <div class="dialog-content" :style="{'max-height':dialogHeight}">
      <slot />
    </div>
    <div v-if="bottemDefault" slot="footer">
      <el-button v-if="bottemCloseDefault" class="t-prompt-closeBtn" @click="closeBtn">{{ cancelText }}</el-button>
      <el-button class="t-prompt-submitBtn" type="primary" @click="determineBtn">{{ submitText }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 92
export default {
  name: 'Prompt',
  props: {
    promptTitle: { type: String, default: '提示' },
    isValidation: { type: Boolean, default: false },
    bottemDefault: { type: Boolean, default: true },
    submitText: { type: String, default: '确 定' },
    cancelText: { type: String, default: '取 消' },
    appendToBody: { type: Boolean, default: false },
    delBtn: { type: Boolean, default: true },
    bottemCloseDefault: { type: Boolean, default: true },
    // spec 有几种规格  4中 1 2 3 4
    spec: { type: String, default: '1' },
    minWidth: { type: Number, default: null },
    maxWidth: { type: Number, default: null }
  },
  data() {
    return {
      dialog: false,
      dialogWidth: null,
      dialogHeight: null
    }
  },
  watch: {
    spec() {
      this.setSpec()
    },
    maxWidth() {
      this.setWidth()
    }
  },
  mounted() {
    this.setSpec()
    this.setWidth()
  },
  methods: {
    setWidth() {
      this.$nextTick(() => {
        const el = document.querySelector('.dialog-customWidth')
        el.style.minWidth = this.minWidth + 'px'
        el.style.maxWidth = this.maxWidth + 'px'
      })
    },
    setSpec() {
      switch (this.spec) {
        case '1':
          this.dialogWidth = '18.2%'
          this.dialogHeight = '39px'

          break
        case '2':
          this.dialogWidth = '34.9%'
          this.dialogHeight = '159px'
          break
        case '3':
          this.dialogWidth = '51.5%'
          this.dialogHeight = '278px'
          break
        case '4':
          this.dialogWidth = '68.2%'
          this.dialogHeight = '398px'
          break
        default:
          this.dialogWidth = '18.2%'
          break
      }
    },
    closeBtn() {
      this.dialog = false
      this.$emit('cancelBtn')
    },
    cancelBtn() {
      this.dialog = false
    },
    openDiglog() {
      this.dialog = true
    },
    determineBtn() {
      if (!this.isValidation) {
        this.dialog = false
      }
      this.$emit('submitBtn')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border: 1px solid rgba(0,0,0,0.06);
  border:0px 0px 1px;
  height: 40px;
  padding: 8px 20px !important;
}
::v-deep .el-dialog__footer {
  border: 1px solid rgba(0,0,0,0.06);
  border:1px 0px 0px;
  height: 52px;
  // line-height: 50px;
  padding-right: 20px;
}
::v-deep .el-dialog__title {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0,0,0,0.85);
  line-height: 24px;
}
.t-prompt-submitBtn {
  height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  padding: 5px 16px !important;
  background: #3378E3 !important;
  border: none;
}
.t-prompt-closeBtn {
    height: 32px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0,0,0,0.65);
    padding: 5px 16px !important;
}
.close-icon {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 16px;
  height: 16px;
  cursor:pointer;

}
.dialog-content {
  overflow-y: scroll;
}
</style>

